<template>
  <div class="Terminal_box" ref="boxTheSize" :style="{'height':'100%','overflow-y':'scroll'}">
    <el-row>
      <el-col :span="4" style>
        <div
          class="grid-content bg-purple scrollber"
          style="height:80vh;overflow:auto;border-radius:6px;background-color: #cce3f9;margin: 20px 0px 0px 0px;height: 80vh;height: 80vh;border-radius: 6px;"
        >
          <div class="Terminal_tree scrollber">
            <zycm-tree :zyTreeData="data" :strictlyData="false" @zyClickTree="checkChangeTree"></zycm-tree>
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple-light" style="padding-left:1.5%;">
          <div class="tltle_box">
            <div class="tltle_box_l">
              <div class="Material_r">
                <el-input
                  placeholder="请输入关键字"
                  v-model="searchInput"
                  @clear="searchInputText"
                  clearable
                ></el-input>
                <el-button type="primary" icon="el-icon-search" @click="searchInputText">搜索</el-button>
                <el-button class="refresh" icon="el-icon-refresh" @click="clearInputText">刷新</el-button>
              </div>
            </div>
            <div class="tltle_box_r">
              <div style="display: inline-block;">
                <!-- <el-tooltip class="item" effect="dark" content="删除终端组" placement="top"> -->
                  <el-button
                    @click="deleteTheChildGroup('group')"
                    v-if="Invoking.forFunctionCode('mediaGroup:deleteGroup')"
                  >
                    <img src="../../assets/images/terminal1_03.png" alt />
                    <div>删除终端组</div>
                  </el-button>
                <!-- </el-tooltip> -->
                <!-- <el-tooltip class="item" effect="dark" content="重命名" placement="top"> -->
                  <el-button
                    @click="addTheChildGroup('amend')"
                    v-if="Invoking.forFunctionCode('mediaGroup:updateGroupName')"
                  >
                    <img src="../../assets/images/terminal3_03.png" alt />
                    <div>重命名</div>
                  </el-button>
                <!-- </el-tooltip> -->
                <!-- <el-tooltip class="item" effect="dark" content="创建子分组" placement="top"> -->
                  <el-button
                    @click="addTheChildGroup('add')"
                    v-if="Invoking.forFunctionCode('mediaGroup:addGroup')"
                  >
                    <img src="../../assets/images/terminal2_03.png" alt />
                    <div>创建子分组</div>
                  </el-button>
                <!-- </el-tooltip> -->
              </div>
              <div
                style="border-left: 1.5px dashed rgb(220, 223, 230);display: inline-block;margin-left: 10px;"
              >
                <!-- <el-tooltip class="item" effect="dark" content="删除终端" placement="top"> -->
                  <el-button
                    @click="deleteTheChildGroup('noGroup')"
                    v-if="Invoking.forFunctionCode('mediaAttribute:updateIsDelete')"
                  >
                    <img src="../../assets/images/terminal5_03.png" alt />
                    <div>删除终端</div>
                  </el-button>
                <!-- </el-tooltip> -->
                <!-- <el-tooltip class="item" effect="dark" content="新增终端" placement="top"> -->
                  <el-button
                    @click="addTerminalGroup"
                    v-if="Invoking.forFunctionCode('mediaAttribute:addMedia')"
                  >
                    <img src="../../assets/images/terminal4_03.png" alt />
                    <div>新增终端</div>
                  </el-button>
                <!-- </el-tooltip> -->
                <!-- <el-tooltip class="item" effect="dark" content="更改分组" placement="top"> -->
                  <el-button
                    @click="changeGrouping"
                    v-if="Invoking.forFunctionCode('mediaAttribute:updateGroup')"
                  >
                    <img src="../../assets/images/terminal6_03.png" alt />
                    <div>更改分组</div>
                  </el-button>
                <!-- </el-tooltip> -->
              </div>
            </div>
          </div>
          <div class="Terminal_table">
            <zycm-table
              @zyLoadData="loadData"
              zy-table-ref="media_group_maintennance_table"
              :zy-table-data="tabledataList"
              zy-table-height="63vh"
              zy-table-select-type="checkbox"
              @zyTableSelect="tableSelect"
              zy-row-key="mid"
            >
              <el-table-column type="expand">
                <template slot-scope="scope">
                  <el-form label-position="left" inline class="demo-table-expand fold">
                    <el-form-item label="音　量:">
                      <span>{{scope.row.voice}}</span>
                    </el-form-item>
                    <el-form-item label="亮　度:">
                      <span>{{scope.row.light}}</span>
                    </el-form-item>
                    <el-form-item label="温　度:">
                      <span>{{scope.row.cpuTemp}}</span>
                    </el-form-item>
                    <el-form-item label="版　本:">
                      <span>{{scope.row.clientVersion}}</span>
                    </el-form-item>
                    <el-form-item label="看门狗:">
                      <span>{{scope.row.dogVersion}}</span>
                    </el-form-item>
                    <el-form-item label="剩余空间:">
                      <span>{{scope.row.diskFreeSpace}}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column label="编号" prop="clientNumber" show-overflow-tooltip min-width="100"></el-table-column>
              <el-table-column label="名称" prop="clientName" show-overflow-tooltip min-width="100"></el-table-column>
              <el-table-column label="组名" prop="mediaGroupName" show-overflow-tooltip min-width="100"></el-table-column>
              <el-table-column label="状态" prop="adStatus" width="80" show-overflow-tooltip>
                <template slot-scope="props">
                  <el-tag type="danger" v-if="props.row.adStatus==0" :size="GlobalVar.sizeSet.tag" >离线</el-tag>
                  <el-tag type="success" v-else-if="props.row.adStatus==1" :size="GlobalVar.sizeSet.tag" >在线</el-tag>
                  <el-tag v-else-if="props.row.adStatus==-1" :size="GlobalVar.sizeSet.tag" >拆机</el-tag>
                  <el-tag type="warning" v-else-if="props.row.adStatus==-2" :size="GlobalVar.sizeSet.tag" >在线异常</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="激活状态" prop="workStatus" width="80" show-overflow-tooltip>
                <template slot-scope="props">
                  <el-tag type="warning" v-if="props.row.workStatus==0" :size="GlobalVar.sizeSet.tag">未激活</el-tag>
                  <el-tag type="success" v-else :size="GlobalVar.sizeSet.tag">激活</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="IP" prop="mediaIp" show-overflow-tooltip></el-table-column>
              <el-table-column label="最后通信" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.lastReceiveTime| dateFormat}}</span>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.createTime | dateFormat}}</span>
                </template>
              </el-table-column>
            </zycm-table>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 创建子分组 -->
    <el-dialog
      :title="differentiate=='add'?((parentTree.length > 0?parentTree[0].label:'')+'-创建子分组'):'重命名'"
      :visible.sync="NewFolder"
      :width="this.$store.getters.offsetWidth"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <el-form ref="form" :model="ChildForm" label-width="100px">
            <el-form-item label="新分组名">
              <el-input v-model="ChildForm.groupingName"></el-input>
            </el-form-item>
          </el-form>
          <span
            style="width: 100%;text-align: center;margin: 0 auto;height: 50px;display: block;"
            class="button_dialog"
          >
            <el-button
              style="background-color:#4d9ce0;color:#fff"
              @click="ConfirmChildGrouping(differentiate)"
            >确 定</el-button>
            <el-button @click="NewFolder=false">取 消</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
    <!-- 新增终端组 -->
    <el-dialog
      title="新增终端"
      :visible.sync="NewTerminal"
      :width="this.$store.getters.offsetWidth"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <el-form ref="form" :model="terminalForm" label-width="100px">
            <el-form-item label="所在分组">
              <el-input v-model="terminalForm.mediaGroupName" placeholder></el-input>
            </el-form-item>
            <el-form-item label="新增数量">
              <el-input v-model="terminalForm.addNumBer" placeholder="请输入0-1000之间的数字" maxlength="3"></el-input>
            </el-form-item>
            <el-form-item label="起始编号">
              <el-input
                v-model="terminalForm.serial"
                placeholder="请输入0-10000000之间的数字"
                maxlength="8"
              ></el-input>
            </el-form-item>
          </el-form>
          <span
            style="width: 100%;text-align: center;margin: 0 auto;height: 50px;display: block;"
            class="button_dialog"
          >
            <el-button style="background-color:#4d9ce0;color:#fff" @click="confirmAddTerminal">确 定</el-button>
            <el-button @click="NewTerminal=false">取 消</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
    <!-- 选择终端组 -->
    <el-dialog
      title="选择终端组"
      :visible.sync="selectTerminal"
      :width="this.$store.getters.offsetWidth"
      v-dialogDrag
      ref="dialog__wrapper"
      @close="selectTerminalClose"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <div class="selectTerminal">
            <zycm-tree ref="treeCheck" no-select-parent-node :strictlyData="true" :zyTreeData="data1" @zyClickTree="zyClickTree"></zycm-tree>
          </div>
          <span
            style="width: 100%;text-align: center;margin: 0 auto;height: 50px;display: block;"
            class="button_dialog"
          >
            <el-button style="background-color:#4d9ce0;color:#fff" @click="DeterminateSystem">确 定</el-button>
            <el-button @click="selectTerminal=false">取 消</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: {
        page: 1,
        pageSize: this.GlobalVar.query.pageSize,
        total: 0,
      },
      // 搜索字段
      searchInput: "",
      TerminalHeight: "",
      tableData: [],
      childrenNode: [],
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      onlyCheckChildProps: {

      },
      //   新增子分组
      NewFolder: false,
      NewTerminal: false,
      selectTerminal: false,
      // 子分组表单
      ChildForm: {
        groupingName: "",
      },
      // 分组父id
      parentTree: [],
      // 区分新增修改
      differentiate: "",
      // 表单
      terminalForm: {
        mediaGroupName: "",
        addNumBer: "",
        serial: "",
        mediaGroupId: "",
      },
      selectTableList: [],
      // 树形结构的勾选
      TreeArray: [],
      defaultARR: [1],
      checkedLevel: "",
      expandedKeys: [0],
      searchFormData: new FormData(),
      tabledataList: [], //保存当页的所有table数据
      tablePageList: [], //保存对应table的page数据
      // selectTableList:[]
      data1: [],
    };
  },
  created() {
    this.clientHeight();
    this.tableList();
  },

  methods: {
    async loadData(formData, tableRef) {
      //提前修正isReqData状态 后续赋值随时会触发table组件的computed  后面还要进行一次修正
      for (let key in this.tabledataList) {
        if (this.tabledataList[key].ref === tableRef) {
          this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
        } else {
          this.tabledataList[key].isReqData = false;
        }
      }

      //子组件触发查询时  处理查询的参数
      if (this.tablePageList[tableRef]) {
        this.tablePageList[tableRef].set("page", formData.get("page"));
        this.tablePageList[tableRef].set("pageSize", formData.get("pageSize"));
      }

      let res;
      if (tableRef == "media_group_maintennance_table") {
        //发布-选择节目列表
        res = await this.$http.post(
          "mediaAttribute/selectPage",
          this.tablePageList[tableRef]
        );
        res.data.dataList.forEach((ele) => {
          if (!ele.playProgramNum) {
            ele.playProgramNum = 0;
          } else if (ele.programNum) {
            ele.programNum = 0;
          }
          this.selectTableList = [];
        });
      }

      if (res && res.data.result === "success") {
        //记录更新分页数据
        res.data.ref = tableRef;
        //更新记录
        let sign = 0;
        for (let key in this.tabledataList) {
          if (this.tabledataList[key].ref === tableRef) {
            if (sign > 1) {
              //去掉重复数据
              this.tabledataList.splice(key, 1);
            } else {
              this.tabledataList.splice(key, 1, res.data);
              this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
            }
            sign++;
          } else {
            this.tabledataList[key].isReqData = false;
          }
        }
        if (sign == 0) {
          //没有初始化时
          res.data.isReqData = true;
          this.tabledataList.push(res.data);
        }
      } else {
        if (res && res.data.result === "error") {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: "请求数据出现异常",
          });
        }
      }
    },
    //当页刷新数据
    currentTableLoad(tableRef, firstPage, fd) {
      if (firstPage) {
        //加载第一页数据
        if (!this.tablePageList[tableRef]) {
          this.tablePageList[tableRef] = new FormData();
          this.tablePageList[tableRef].set("pageSize", this.GlobalVar.query.pageSize);
        }
        this.tablePageList[tableRef].set("page", 1);
      }
      //如果有其他查询参数 合并处理
      if (fd) {
        for (let item of fd.entries()) {
          this.tablePageList[tableRef].set(item[0], item[1]);
        }
      }
      this.loadData(this.tablePageList[tableRef], tableRef);
    },
    tableSelect(selection, row, tableRef) {
      if (tableRef === "media_group_maintennance_table") {
        //发布-选择节目
        this.selectTableList = selection;
      }
    },
    // 选择终端组
    async DeterminateSystem() {
      let deleteList = [];
      this.selectTableList.forEach((ele) => {
        deleteList.push(ele.mid);
      });

      if (deleteList.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择需要更换分组的终端",
        });
        return;
      } else if (!this.TreeArray || this.TreeArray.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择终端需更换的新分组",
        });
        return;
      }

      //增加同步组提醒
      let formData = new FormData();
      formData.append("mids", deleteList);
      this.DeterminateSystem2(formData)
      /*const { data: res1 } = await this.$http.post("syncGroup/validSyncMedia", formData);
      if(res1.result === 'success'){
        if(res1.data.length > 0){
          this.$confirm("更改分组中选择的终端存在同步主终端，更改后如果选择的终端组没有节目会使相关同步组中的所有终端都无节目播放，是否强制更改分组？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(async () => {
            this.DeterminateSystem2(formData)
          })
          .catch(() => {

          });
        } else {
          this.DeterminateSystem2(formData)
        }

      } else {
        this.$message.error(res1.message)
      }*/
    },
    async DeterminateSystem2(formData){
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("mediaGroupId", this.TreeArray);
      let url = "mediaAttribute/updateGroup";
      const { data: res } = await this.$http.post(url, formData);
      this.selectTerminal = false;
      if (res.result == "success") {
        this.$message({
          type: "success",
          message: res.message,
        });

        this.selectTableList = [];
        this.TreeArray = [];
        if (this.$refs.treeCheck) {
          // this.$refs.treeCheck.$refs.treeCheck.setCheckedKeys([]);
        }
        // this.childrenNode = [];
        // this.clientHeight();
        this.query.page = 1;
        this.query.pageSize = this.GlobalVar.query.pageSize;
        this.tableList();
      } else {
        this.$message({
          type: "error",
          message: res.message,
        });
      }
    },
    selectTerminalClose() {
      this.data[0].children.forEach((element) => {
        this.$refs.treeCheck.$refs.treeCheck.store.nodesMap[
          element.data
        ].expanded = false;
      });
      // this.$refs.treeCheck.$refs.treeCheck.setCheckedKeys([]);
    },
    unique(array) {
      var temp = []; //一个新的临时数组
      for (var i = 0; i < array.length; i++) {
        if (temp.indexOf(array[i]) == -1) {
          temp.push(array[i]);
        }
      }
      return temp;
    },
    // 树形结构
    zyClickTree(data, checked, node) {
      this.TreeArray=[];
      if(data.data && data.lastChildren === 0){
         this.$message.error("请选择非父节点");
         return;
      }
      if(data.data && data.lastChildren === 1){
        this.TreeArray.push(data.data);
      }

    },
    // 更改分组
    async changeGrouping(e) {
      if (this.selectTableList.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择更改分组的终端",
        });
        //return;
      } else {
        this.selectTerminal = true;
        await this.treeGetList("dialog");
      }
    },
    // 勾选表格数据
    selectTable(selection, row) {
      this.selectTableList = selection;
    },
    // 新增终端组
    addTerminalGroup() {
      if (this.parentTree.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择终端组",
        });
        return;
      }
      if (
        this.parentTree[0].data == 0 ||
        (this.parentTree[0].children && this.parentTree[0].children.length > 0)
      ) {
        this.$message({
          type: "warning",
          message: "请选择最末节点的有效终端组",
        });
        return;
      }
      this.terminalForm = {};
      this.terminalForm.mediaGroupName = this.parentTree[0].label;
      this.NewTerminal = true;
    },
    async confirmAddTerminal() {
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("mediaGroupId", this.parentTree[0].data);
      formData.append("num", this.terminalForm.addNumBer);
      formData.append("start", this.terminalForm.serial);
      let url = "mediaAttribute/addMedia";
      const { data: res } = await this.$http.post(url, formData);
      if (res.result == "success") {
        this.$message({
          type: "success",
          message: res.message,
        });
      } else {
        this.$message({
          type: "error",
          message: res.message,
        });
      }
      this.NewTerminal = false;
      this.terminalForm.addNumBer = "";
      this.terminalForm.serial = "";
      this.tableList();
      // this.clientHeight();
    },
    // 删除终端组
    deleteTheChildGroup(e) {
      let text = "";
      if (e == "noGroup") {
        if (this.selectTableList.length == 0) {
          this.$message({
            type: "warning",
            message: "请选择终端",
          });
          return;
        }
        text =
          "此操作将永久删除离线终端,在线终端删除后会回归用户所属的默认未分组并且变成未激活状态,是否继续?";
        this.differentiate = "delete";
      } else {
        if (this.parentTree.length == 0) {
          this.$message({
            type: "warning",
            message: "请选择终端组",
          });
          return;
        }
        if (
          this.parentTree[0].label == "未分组" ||
          this.parentTree[0].label == "所有终端组"
        ) {
          this.$message({
            type: "warning",
            message: "根节点与未分组不能删除！",
          });
          return;
        }
        if (
          this.parentTree[0].data == 0 ||
          (this.parentTree[0].children &&
            this.parentTree[0].children.length > 0)
        ) {
          this.$message({
            type: "warning",
            message: "请选择最末节点的有效终端组",
          });
          return;
        }
        if (this.parentTree[0].lastChildren == 0) {
          text =
            "确定删除【" +
            this.parentTree[0].title +
            "】,终端组下或其子分组中存在终端,如果确定删除,其下所有终端(有子分组也包括子分组中的终端)将移至【未分组】中且节目单(LED节目单)将变成未分组上的节目单,请慎重删除！";
        } else {
          text = "确定删除【" + this.parentTree[0].title + "】吗？";
        }

        this.differentiate = "remove";
      }
      this.$confirm(text, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.ConfirmChildGrouping();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 点击新增子分组 // 点击修改分组名
    addTheChildGroup(e) {
      if (this.parentTree.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择终端组",
        });
        return;
      }
      if (e == "amend") {
        this.ChildForm.groupingName = this.parentTree[0].label;
      } else if (e == "add") {
        this.ChildForm.groupingName = "";
      }
      this.differentiate = e;
      this.NewFolder = true;
    },
    async ConfirmChildGrouping() {
      let deleteList = [];
      this.selectTableList.forEach((ele) => {
        deleteList.push(ele.mid);
      });
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      let url = "";
      if (this.differentiate == "add" && this.checkedLevel >= 6) {
        this.$message({
          type: "warning",
          message: "最多创建6级子分组",
        });
        return;
      }
      if (this.differentiate == "amend") {
        if (!this.ChildForm.groupingName) {
          this.$message({
            type: "warning",
            message: "组名不能为空",
          });
          return;
        }
        //重命名
        formData.append("mediaGroupId", this.parentTree[0].data);
        formData.append("mediaGroupName", this.ChildForm.groupingName);
        url = "mediaGroup/updateGroupName";
      } else if (this.differentiate == "add") {
        if (!this.ChildForm.groupingName) {
          this.$message({
            type: "warning",
            message: "组名不能为空",
          });
          return;
        }
        //新增终端组
        formData.append("parentId", this.parentTree[0].data);
        formData.append("mediaGroupName", this.ChildForm.groupingName);
        url = "mediaGroup/addGroup";
      } else if (this.differentiate == "remove") {
        //终端组删除
        formData.append("mediaGroupId", this.parentTree[0].data);
        url = "mediaGroup/deleteGroup";
      } else if (this.differentiate == "delete") {
        //终端删除
        formData.append("mids", deleteList);
        url = "mediaAttribute/updateIsDelete";
      }
      const { data: res } = await this.$http.post(url, formData);
      if (res.result == "success") {
        this.$message({
          type: "success",
          message: res.message,
        });
      } else {
        this.$message({
          type: "error",
          message: res.message,
        });
      }
      this.NewFolder = false;

      // this.parentTree = [];
      this.terminalForm.mediaGroupName = "";
      this.tableList();
      if (
        this.differentiate == "remove" ||
        this.differentiate == "add" ||
        this.differentiate == "amend"
      ) {
        this.clientHeight();
        this.childrenNode = [];
        this.parentTree = [];
      }
      this.differentiate = "";
      this.selectTableList = [];
    },
    // 点击搜索
    searchInputText() {
      this.tableList();
    },
    clearInputText() {
      this.currentTableLoad("media_group_maintennance_table");
    },

    checkChangeTree(data, checked, node) {
      this.query.total = 0;
      this.checkedLevel = checked.level;
      this.childrenNode = [];
      this.parentTree = [];
      this.defaultARR = [];
      if(data && data.data === ""){
          this.childrenNode=[];
          this.parentTree=[];
      }else{
          if (data.lastChildren == 0) {
            this.defaultARR.push(data.data);
          }
          this.childrenNode.push(data.data);
          this.parentTree.push(data);
      }
      this.tableList();
    },
    rowStyle(row, rowIndex) {
    },
    clickTable(row, index, e) {
      this.$refs.refTable.$refs.refTable.toggleRowExpansion(row);
    },
    //   点击搜索
    async clientHeight() {
      this.treeGetList();
    },
    async treeGetList(e) {
      let formData = new FormData();
      let uid = window.sessionStorage.getItem("uid");
      let token = window.sessionStorage.getItem("token");
      formData.append("zycmToken", token);
      formData.append("uid", uid);
      const { data: res } = await this.$http.post(
        "mediaGroup/selectGroupTree",
        formData
      );
      if (e == "dialog") {
        this.data1 = [];
        this.data1.push(res.data);
        this.data1[0]["strictly"] = true;
        this.data1[0]["ifchenck"] = false;
      } else {
        this.data = [];
        this.data.push(res.data);
      }
    },
    // 获取表格
    async tableList() {
      let formData = new FormData();
      let token = window.sessionStorage.getItem("token");
      formData.set("zycmToken", token);
      formData.set("mediaGroupId", this.childrenNode);
      formData.set("clientName", this.searchInput);
      this.currentTableLoad("media_group_maintennance_table", true, formData);
      if (this.parentTree[0]) {
        if (this.differentiate == "add" || this.differentiate == "amend") {
          this.defaultARR = [0, this.parentTree[0].parentId];
        } else {
          this.defaultARR = [0, this.parentTree[0].data];
        }
      }
      this.selectTerminal = false;
    },

  },
};
</script>



<style lang="stylus" scoped>
/deep/.el-form-item__label{
    margin-top: 1px;
}
.Terminal_box::-webkit-scrollbar {
  display: none;
}
.Terminal_box {
  height: 100vh;
  .BgColor {
    //background-color: #e4f2ff;
    background-color: #cce3f9;
    height: 100%;
  }
  // /deep/.el-table{
  //   border: 1px solid #ccc;
  // }
  .tltle_box {
    margin: 20px 20px 20px 0;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    height: 10vh;
    width: 97%;
    align-items: center;
    //margin-bottom: 15px;
    border-radius: 6px;
    .tltle_box_l {
      display: flex;
      width: 45%;
      .Material_r {
        display: flex;
        margin-left: 20px;
        /deep/.el-button {
          margin: 0 0 0 20px;
          height: 40px;
          background-color: #2183d8;
        }
        .refresh {
          background-color: #fff;
          color: #2183d8;
        }
      }
    }
    .tltle_box_r {
      padding-right: 20px;
      .el-button {
        float: right;
        background-color: #f2faff;
        min-width: 50px;
        height: 50px;
        border: none;
        margin-left: 0;
        margin: 0 5px;
        padding: 0 5px;
        border-radius: 5px;
        font-size:12px;
        img {
          width: 26px;
          height: 26px;
        }
      }
      /deep/.el-button:hover {
        background-color: #f2f2f2;
      }
    }
    /deep/.el-table th,
    .el-table tr {
      background-color: #fafafa;
    }
  }
  .Terminal_table {
    //margin: 1.5% 1.5% 0 0;
    width: 97%;
    padding-top: 5px;
    background-color: #fff;
    border-radius: 6px;
    height: 67.5vh;
    .el-table {
      margin: 1.5%;
      width: 97%;
      // padding: 20px;
    }
  }
  /deep/.el-tree--highlight-current /deep/.el-tree-node/deep/.is-current>.el-tree-node__content{
   background: #2183d8;
  color: #fff;
}
  .Terminal_tree {
    padding: 6px;
  }
  /deep/.el-tree {
    //background-color: #e4f2ff;
    background-color: #cce3f9;
  }
  .pagination {
    display: flex;
    height: 60px;
    justify-content: center;
  }
  /deep/.el-pager li,
  /deep/.el-pagination .btn-next,
  /deep/ .el-pagination .btn-prev {
    border: 1px solid #eee;
    border-radius: 5px;
    margin: 0 5px;
    color: #333;
    padding: 0;
  }
  /deep/.el-pager li.active {
    background-color: #2183d8;
    color: #fff;
  }
  /deep/.el-pagination__sizes {
    padding-left: 20px;
  }
  .fold {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .fold /deep/.el-form-item__label {
    color: #0095fb;
  }
  .fold /deep/.el-form-item {
    min-width: 20%;
  }
}
/deep/.el-tree-node > .el-tree-node__children {
  min-width: 100%;
  overflow: inherit;
}
/deep/.el-dialog {
  .selectTerminal {
    height: 400px;
    width: 100%;
    overflow-y: scroll;
    /deep/.el-tree {
      background-color: #fff;
      padding: 0 0 5% 10%;
    }
  }
  /deep/.el-select {
    display: block;
  }
  /deep/.el-dialog__header {
    background-color: #efefef;
    padding: 0;
    line-height: 50px;
    padding-left: 20px;
    color: #333;
    font-size: 16px;
  }
  /deep/.el-form-item__label {
    background-color: #efefef;
    border-radius: 0;
    height: 40px;
    border: 1px solid #dcdfe6;
    border-right: none;
    box-sizing: border-box;
    text-align: center;
    padding-left: 10px;
  }
  /deep/.el-input__inner,
  /deep/.el-textarea__inner {
    border-radius: 0;
  }
  /deep/.el-button {
    padding: 12px 25px;
  }
  .opinion {
    /deep/.el-form-item__label {
      height: 80px;
      line-height: 80px;
    }
  }
}
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  // background: #2183d8;
  // color: #ccc;
}

</style>
